<html>
    <head>
        <meta name="viewport" content="width=device-width, user-scalable=no"/>
        <title>TestPage</title>
        <style type="text/css">
            input {
                font-size: 100%
            }

            table {
                margin-left: 5%;
            }

            div {
                width: 90%;
                font-size: 20pt;
                margin-left: 5%;
                margin-right: 5%;
                margin-top: 20px;
                margin-bottom: 20px;
                background-color: blue;
                color: white;
            }

            a {
                font-size: 20pt;
                color: white;
                background-color: none;
                margin-bottom: 0;
            }

            div.header {
                color: blue;
                background-color: white;
                margin-bottom: 0;
            }

            body {
              margin: 0
            }
        </style>
        <script>
        function load()
        {
            pxRatio = document.getElementById("pixelRatio")
            pxRatio.innerHTML = "My devicePixelRatio: " + window.devicePixelRatio
        }

        function handleEnter(event, element)
        {
            var code = (event.keyCode ? event.keyCode : event.which);
            if(code == 13) { //Enter keycode
                var targetElement = document.getElementById(element.id + "_output")
                var strValue = element.value
                var fValue = parseFloat(strValue)
                if (fValue) {
                    targetElement.innerHTML = fValue
                }
            }
        }
        </script>
    </head>
    <body onload="load()">
        <div id="pixelRatio">HelloWorld</div>
        <table>
            <tr>
                <td>Text</td>
                <td><input id="text" type="text" name="text_field" onKeyPress="handleEnter(event, this)"/></td>
                <td><input value="Parse" type="button" onclick="handleEnter({keyCode: 13}, document.getElementById('text'))"/></td>
                <td id="text_output"></td>
            </tr>
            <tr>
                <td>Number</td>
                <td><input id="number" type="number" name="number_field" onKeyPress="handleEnter(event, this)"/></td>
                <td><input value="Parse" type="button" onclick="handleEnter({keyCode: 13}, document.getElementById('number'))"/></td>
                <td id="number_output"></td>
            </tr>
            <tr>
                <td>URL</td>
                <td><input type="url" name="url_field" /></td>
                <td></td>
                <td></td>
            </tr>
        </table>
    <div class="header"><h2>HTML basic</h2></div>
    <div>
      <a href="testwebprompts.html">test web prompts</a>
    </div>
    <div>
      <a href="testcookies.html">test cookies - restart browser</a>
    </div>
    <div>
      <a href="testselect.html">test selects</a>
    </div>
    <div>
      <a href="testinputfocus.html">test input focus</a>
    </div>
    <div>
      <a href="testnavigation.html">test back,forward navigation, and links</a>
    </div>
    <div>
      <a href="testmouseclick.html">test mouse click positions</a>
    </div>
    <div>
      <a href="testurlscheme.html">test url scheme handling</a>
    </div>
    <div>
      <a href="testuseragent.html">what's my User Agent string</a>
    </div>
    <div>
      <a href="testwindowopen.html">window open test page</a>
    </div>
    <div>
      <a href="testfilepicker.html">File picker tests</a>
    </div>
    <div>
      <a href="testlocalization.html">Localization samples / tests</a>
    </div>
    <div>
      <a href="testanchors.html#lowerAnchor">Anchors page, open lower anchor</a>
    </div>
    <div>
      <a href="testcss.html">CSS capabilities</a>
    </div>

    <div class="header"><h2>HTML geolocation</h2></div>
    <div>
      <a href="testgeolocation.html">Simple geolocation test</a>
    </div>

    <div class="header"><h2>HTML5 audio</h2></div>
    <div>
      <a href="testhtml5audio.html">HTML5 audio tag / audio download</a>
    </div>
    <div class="header"><h2>HTML5 fullscreen and video</h2></div>
    <div>
      <a href="testvideo.html">Simple video test page</a>
    </div>
    <div>
      <a href="test-fullscreen-content-s.html">Short page containing fullscreen toggle</a>
    </div>
    <div>
      <a href="test-fullscreen-content-l.html">Long page containing fullscreen toggle</a>
    </div>
    <div>
      <a href="test-fullscreen-video-s.html">Short page containing embeded video</a>
    </div>
    <div>
      <a href="test-fullscreen-video-l.html">Long page containing embeded video</a>
    </div>

    <div class="header"><h2>Touch input</h2></div>
    <div>
      <a href="testtouchaction.html">Touch actions and the touch-action css property</a>
    </div>
    <div>
      <a href="testtouchclick.html">Touch input vs. mouse input</a>
    </div>
    <div>
      <a href="testbuttontarget.html">Touch button target</a>
    </div>
    <div>
      <a href="testmargindrift.html">Touch drift and fixed element tests with browser margins</a>
    </div>

    <div class="header"><h2>CSS mix-blend-mode</h2></div>
    <div>
      <a href="test-mix-blend-mode-png.html">mix-blend-mode with static PNG images</a>
    </div>
    <div>
      <a href="test-mix-blend-mode-svg.html">mix-blend-mode with static SVG images</a>
    </div>
    <div>
      <a href="test-mix-blend-mode-svg-anim.html">mix-blend-mode with SVG images and animated opacity</a>
    </div>
    <div>
      <a href="test-mix-blend-mode-svg-hand.html">mix-blend-mode of container divs</a>
    </div>

    <div class="header"><h2>Misc</h2></div>
    <div>
      <a href="http://www.quirksmode.org/css/tests/mediaqueries/devicepixelratio.html">QuirksMode's MediaQueries DevicePixelRatio test page</a>
    </div>
    <div>
      <a href="http://www.quirksmode.org/m/tests/dpr_moz.html">QuirksMode's Mozilla DevicePixelRatio test page</a>
    </div>
    </body>
</html>
